<template>
  <div class="skybox">
    <div class="title">
      <el-radio-group>
        <el-radio-button value="day" @change="setSkybox('day')">白天</el-radio-button>
        <el-radio-button value="dusk" @change="setSkybox('dusk')">黄昏</el-radio-button>
        <el-radio-button value="night" @change="setSkybox('night')">黑夜</el-radio-button>
      </el-radio-group>
    </div>
    <div ref="refDom" class="model-view">
    </div>
  </div>
</template>

<script setup>
import {useTemplateRef} from 'vue'
import * as THREE from 'three'
import {OrbitControls} from 'three/examples/jsm/controls/OrbitControls.js'
import {GLTFLoader} from 'three/addons/loaders/GLTFLoader.js'
import {RGBELoader} from 'three/addons/loaders/RGBELoader.js'

defineOptions({
  name: 'threejs'
})
const refDom = useTemplateRef('refDom')
const scene = new THREE.Scene()
const light = new THREE.DirectionalLight()
onMounted(() => {
  init()
})

const setSkybox = (type = 'day') => {
  const loaderbox = new THREE.CubeTextureLoader() // 加载贴图
  scene.background = loaderbox.load([
    `${import.meta.env.VITE_THREEJS_BASE_URL}/images/skybox/${type}/posx.jpg`,
    `${import.meta.env.VITE_THREEJS_BASE_URL}/images/skybox/${type}/negx.jpg`,
    `${import.meta.env.VITE_THREEJS_BASE_URL}/images/skybox/${type}/posy.jpg`,
    `${import.meta.env.VITE_THREEJS_BASE_URL}/images/skybox/${type}/negy.jpg`,
    `${import.meta.env.VITE_THREEJS_BASE_URL}/images/skybox/${type}/posz.jpg`,
    `${import.meta.env.VITE_THREEJS_BASE_URL}/images/skybox/${type}/negz.jpg`
  ])
  setLight(type)
}
const setLight = (type) => {
  const colors = {
    'day': 'rgb(255,255,255)',
    'dusk': 'rgb(0,255,0)',
    'night': 'rgb(255,0,0)'
  }
  // 光线
  scene.remove(light)
  light.color = new THREE.Color(colors[type])
  light.intensity = 10 // 光线强度
  light.position.set(-1, 2, 4)
  scene.add(light)
}
const init = async () => {
  const DOM = refDom.value//document.getElementById('refDom')
  // 透视摄像机
  const camera = new THREE.PerspectiveCamera(45, DOM.clientWidth / DOM.clientHeight, 0.25, 20)
  camera.position.set(-1.8, 0.6, 8)
  const renderer = new THREE.WebGLRenderer({
    antialias: true, // 反锯齿
    alpha: true,
    logarithmicDepthBuffer: true
  })
  renderer.setPixelRatio(window.devicePixelRatio)
  renderer.toneMapping = THREE.ACESFilmicToneMapping
  renderer.toneMappingExposure = 1
  renderer.setSize(DOM.clientWidth, DOM.clientHeight)
  DOM.appendChild(renderer.domElement)

  scene.fog = new THREE.Fog(0xcccccc, 10, 15)

  // 控制器
  const controls = new OrbitControls(camera, renderer.domElement) // 鼠标控制
  controls.enableDamping = true // 设置阻尼
  controls.minDistance = 2
  controls.maxDistance = 10
  controls.target.set(0, 0, -0.2)
  controls.update()


  // 天空盒背景材质
  setSkybox()
  //加载模型
  const loader = new GLTFLoader()
  let objGroup
  loader.load(`${import.meta.env.VITE_THREEJS_BASE_URL}/helmet/DamagedHelmet.gltf`, (gltf) => {
    objGroup = gltf.scene
    scene.add(objGroup)
    const animate = () => {
      controls.update()
      objGroup?.rotateY(0.02)
      renderer.render(scene, camera)
      requestAnimationFrame(animate)
    }
    animate()
  })

  window.onresize = () => {
    renderer.setSize(DOM.clientWidth, DOM.clientHeight)
    camera.aspect = DOM.clientWidth / DOM.clientHeight
    camera.updateProjectionMatrix()
  }

  // scene.add(new THREE.AxesHelper(1000)) // xyz轴辅助线

  // scene.add(new THREE.AmbientLight(0x404040, 5))

  let directionalLight = new THREE.DirectionalLight(0xffffff, 1)
  directionalLight.castShadow = true
  directionalLight.position.set(0, 50, 0)

  scene.add(directionalLight)
}


</script>

<style lang="scss" scoped>
.skybox {
  width: 100%;
  height: 100%;

  .title {
    height: 30px;
    line-height: 30px;
    margin-bottom: 10px;
  }

  .model-view {
    width: 100%;
    height: calc(100% - 40px);
    background: #123;
  }
}
</style>
